<template>
  <div class="body_content_two" id="recommend">
    <!-- 标题 -->
    <div class="content_two_text">
      <h3>人气推荐</h3>
      <a @click="cutRecommend(false)">编辑推荐</a>
      <a @click="cutRecommend(true)">热销总榜</a>
      <a>更多推荐 > </a>
    </div>
    <!-- 商品 -->
    <div class="body_content_popular">
      <div
        class="content_popular_left"
        v-for="RecommendBig in Recommendlist.editorBig"
        :key="RecommendBig.id"
        @click="goDetail(RecommendBig.id)"
      >
        <img :src="RecommendBig.image" alt="" />
        <h4>{{ RecommendBig.title }}</h4>
        <h4>{{ RecommendBig.context }}</h4>
        <span>￥{{ RecommendBig.price }}</span>
        <span>￥{{ RecommendBig.originprice }}</span>
      </div>
      <div class="content_popular_right">
        <div
          v-for="RecommendBig in Recommendlist.editorSmall"
          :key="RecommendBig.id"
          @click="goDetail(RecommendBig.id)"
        >
          <img :src="RecommendBig.image" alt="" />
          <h5>{{ RecommendBig.title }}</h5>
          <h5>{{ RecommendBig.context }}</h5>
          <span>￥{{ RecommendBig.price }}</span>
          <span>￥{{ RecommendBig.originprice }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopEell",
  props: ["Recommendlist"],
  methods: {
    cutRecommend(a) {
      this.$emit("EellisShow", a);
    },
    //路由跳转
    goDetail(id) {
      this.$router.push({
        name: "detail",
        params: { id: id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body_content_two {
  width: 1519.2px;
  height: 738px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(244, 240, 234);
}
.content_two_text {
  width: 1090px;
  height: 48px;
}
.content_two_text h3 {
  display: inline-block;
  font-size: 28px;
}
.content_two_text a {
  display: inline-block;
  font-size: 14px;
  margin-left: 20px;
  color: #333333;
}
.content_two_text a:hover {
  border-bottom: 3px solid rgb(181, 161, 122);
  color: rgb(181, 161, 122);
}
.content_two_text a:last-child {
  float: right;
  border-bottom: none;
  margin-top: 16px;
}
.body_content_popular {
  width: 1090px;
  height: 570px;
  text-align: center;
  /* background-color: lightblue; */
  display: flex;
  flex-direction: row;
  /* 主轴上两边元素靠边 中间平分 */
  justify-content: space-between;
}
.body_content_popular .content_popular_left img {
  transform: scale(1.1);
  transition-duration: 1s;
}
.body_content_popular .content_popular_right > div img {
  transform: scale(1.1);
  transition-duration: 1s;
}
.body_content_popular span:nth-child(5) {
  text-decoration: line-through;
}
.body_content_popular .content_popular_left {
  width: 390px;
  height: 570px;
  background-color: white;
}
.body_content_popular .content_popular_left img {
  width: 320px;
  height: 320px;
  margin: 35px auto;
}
.body_content_popular .content_popular_left h4 {
  font-size: 18px;
}
.body_content_popular .content_popular_left span {
  font-size: 18px;
}
.body_content_popular .content_popular_right {
  width: 690px;
  height: 570px;
  display: flex;
  flex-direction: row;
  /* 主轴上两边元素靠边 中间平分 */
  justify-content: space-between;
  /* 前提是设置自动换行 */
  flex-wrap: wrap;
  /* 交叉轴两边元素靠边 多行 */
  align-content: space-between;
}
.body_content_popular .content_popular_right div {
  width: 223px;
  height: 280px;
  background-color: white;
}
</style>
